import React, { Component } from 'react'
import { Card, Button, Table, Modal, message } from "antd";

import {PAGE_SIZE} from '../../utils/constants'
import memoryUtils from "../../utils/memoryUtils";
import storageUtils from '../../utils/storageUtils'
import { formateDate } from "../../utils/dateUtils";
import { reqRoles, reqAddRole, reqUpdateRole } from "../../api";
import AddForm from './add-form';
import AuthForm from './auth-form'

export default class Role extends Component {
    
    state= {
        roles: [], // 所有角色的列表
        role: {}, // 选中的 role
        isShowAdd: false, // 添加角色对话框开关
        isShowAuth: false, // 设置角色权限对话框开关
    }

    constructor(props) {
        super(props)

        this.auth = React.createRef()
    }

    initColumn = () => {
        this.columns = [
            {
                title: '角色',
                dataIndex: 'name'
            },
            {
                title: '创建时间',
                dataIndex: 'create_time',
                render: (create_time) => formateDate(create_time)
            },
            {
                title: '授权时间',
                dataIndex: 'auth_time',
                render: formateDate
            },
            {
                title: '授权人',
                dataIndex: 'auth_name'
            },
        ]
    }

    getRoles = async () => {
        const result = await reqRoles();
        // console.log('result = ' + JSON.stringify(result));
        if(result.status === 0) {
            const roles = result.data;
            this.setState({
                roles
            });
        }
    }

    onRow = (role) => {
        return {
            onClick: event => { // 点击回调
                this.setState({
                    role
                });
            }
        }
    }

    addRole = () => {
        this.form.validateFields(async (error, values) => {
            if(!error) {

                // 隐藏确认框
                this.setState({
                    isShowAdd: false
                });

                // 收集数据
                const { roleName } = values;
                this.form.resetFields();

                // 发请求
                const result = await reqAddRole(roleName);

                // 根据结果提示/更新列表显示
                if(result.status === 0) {
                    message.success('添加角色成功');
                    // 更新 roles 状态/列表
                    // // 方法一： 不推荐使用
                    const role = result.data;
                    // const roles = this.state.roles;
                    // roles.push(role);
                    // this.setState({
                    //     roles
                    // });

                    // 方法二：基于原本专题数据更新
                    this.setState(state => ({
                        roles: [...state.roles, role]
                    }));


                }else {
                    message.success('添加角色失败')
                }

            }
        })
    }

    // 更新角色的权限
    updateRole = async () => {

        // 隐藏确认框
        this.setState({
            isShowAuth: false
        });

        const role = this.state.role;
        // 得到最新的menus
        const menus = this.auth.current.getMenus()
        role.menus = menus;
        role.auth_name = memoryUtils.user.username;
        // role.auth_time = Date.now();

        // 请求更新
        const result = await reqUpdateRole(role);

        if(result.status === 0) {
            // this.getRoles();
            if(role._id === memoryUtils.user.role_id) {
                memoryUtils.user = {};
                storageUtils.removeUser();
                this.props.history.replace('/login')
                message.success('当前用户角色权限修改了， 重新登陆')
            }else {
                message.success('设置角色权限成');
                this.setState({
                    roles: [...this.state.roles]
                })
            }
        }
    }

    UNSAFE_componentWillMount() {
        this.initColumn();
    }

    componentDidMount() {
        this.getRoles();
    }

    render() {
        const {roles, role, isShowAdd, isShowAuth} = this.state;

        const title = (
            <span>
                <Button type='primary' onClick={() => this.setState({isShowAdd: true})}>创建角色</Button>&nbsp;&nbsp;
                <Button type='primary' disabled={!role._id} onClick={() => this.setState({isShowAuth: true})}>设置角色权限</Button>
            </span>
        );

        return (
            <Card title={title}>
                <Table 
                    bordered
                    rowKey='_id'
                    dataSource={roles}
                    columns={this.columns}
                    pagination={{defaultPageSize: PAGE_SIZE}}
                    rowSelection={{
                        type: 'radio', 
                        selectedRowKeys: [role._id],
                        rowSelection: (role) => { // 点 radio的时候回调
                            this.setState({
                                role
                            })
                        }
                    }}
                    onRow={this.onRow}
                />
                <Modal
                    title="添加角色"
                    visible={isShowAdd}
                    onOk={this.addRole}
                    onCancel={() => {
                        this.setState({isShowAdd: false})
                        this.form.resetFields()
                    }}
                >
                    <AddForm setForm={(form) => this.form = form}/>
                </Modal>

                <Modal
                    title="设置角色权限"
                    visible={isShowAuth}
                    onOk={this.updateRole}
                    onCancel={() => {
                        this.setState({isShowAuth: false})
                    }}
                >
                    <AuthForm role={role} ref={this.auth} />
                </Modal>
            </Card>
        )
    }
}